<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tooltip</title>
  <link rel="stylesheet" href="../src/css-ui.css">
  <style lang="text/css">
  .target{
    width: 100px;
    border:1px solid red;  
    position:relative;
    font-size: 20px;
  }
  .target:hover::after{
    content:attr(data-tooltip);
    position:absolute;
    font-size: 12px;
    width:200%;
    line-height:30px;
    text-align:center;
    left:0;
    top:25px;
    border:1px solid green;
  }
  a[href^="http"]:empty::before {
    content: attr(href);
  }
  .bd {
    max-height:0;
    overflow:hidden;
    transition: all 1s ease-out;
  }
  li:hover .bd {
    max-height: 600px;
    transition-timing-function: ease-in;
  }
  .tt{
    background-color: red;
  }
  </style>
</head>
<body>

  
  <div class="target" data-tooltip="测试tooltip">
    asadasd
  </div>
  <a href="http://baidu.com"></a>


  <!-- <div class="container">
    <div class="row" style="margin-top: 2rem;">
      <form>
        <div class="form-group">
          <label>name</label>
          <input type="text" required placeholder="请输入名称">
        </div>
        <div class="form-group">
          <label>email</label>
          <input type="email" required placeholder="请输入邮箱">
        </div>
        <div class="form-group">
          <label>homepage</label>
          <input type="url" placeholder="请输入博客url">
        </div>
        <div class="form-group">
          <label>Comments</label>
          <textarea required></textarea>
        </div>
      </form>
    </div>
  </div> -->

  <ul>
    <li>
      <div class="hd"> 列表1 </div>
      <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
    </li>
    <li>
      <div class="hd"> 列表1 </div>
      <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
    </li>
    <li>
      <div class="hd"> 列表1 </div>
      <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
    </li>
  </ul>
  <div class="wrap-test tt">
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    sdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    sdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    sdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
    aasdasdasd
  </div>
  <div class="btn">按钮按钮按钮按钮按钮按钮</div>
  <script>
  const dom = document.querySelector('.wrap-test')
  const toggleClass = (el, className) => el.classList.toggle(className)
  toggleClass(dom,'tt')
  const scrollToTop = () => {
    const c = document.documentElement.scrollTop || document.body.scrollTop;
    if (c > 0) {
      window.requestAnimationFrame(scrollToTop);
      window.scrollTo(0, c - c / 8);
    }
  }
  const btn = document.querySelector('.btn')
  btn.onclick = scrollToTop
  </script>
</body>
</html>